<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chessboard Selection</title>
<style>
  table {
    border-collapse: collapse;
  }
  td {
    width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
  }
</style>
</head>
<body>

<table>
  <tbody id="chessboard">
  </tbody>
</table>

<script>
  // 创建棋盘
  const chessboardSize = 9;
  const chessboard = document.getElementById('chessboard');
  for (let i = 0; i < chessboardSize; i++) {
    const row = document.createElement('tr');
    for (let j = 0; j < chessboardSize; j++) {
      const cell = document.createElement('td');
      cell.id = `cell-${i}-${j}`;
      cell.addEventListener('click', () => selectGroup(i, j));
      row.appendChild(cell);
    }
    chessboard.appendChild(row);
  }

  // 选择一个小组
  function selectGroup(row, col) {
    const groupRow = Math.floor(row / 3);
    const groupCol = Math.floor(col / 3);

    for (let i = 0; i < chessboardSize; i++) {
      for (let j = 0; j < chessboardSize; j++) {
        const cell = document.getElementById(`cell-${i}-${j}`);
        const cellGroupRow = Math.floor(i / 3);
        const cellGroupCol = Math.floor(j / 3);
        if (cellGroupRow === groupRow && cellGroupCol === groupCol) {
          cell.style.backgroundColor = 'yellow';
        } else {
          cell.style.backgroundColor = '';
        }
      }
    }
  }
</script>

</body>
</html>
